<template>
	<ls-page title="">
		<view class="centerCoin-container">
			<view class="centerCoin-container-header">
				<view class="container-header-value">{{ pointsModal.currentPoints || 0 }}</view>
				<view class="container-header-title">当前积分</view>
			</view>
			<view class="centerCoin-container-main" v-for="(item, index) in pointsModal.history" :key="index">
				<view class="container-main-h2">{{ item.date }}</view>

				<view class="container-main-item" v-for="(subItem, subIndex) in item.children" :key="subIndex">
					<view class="main-item-upper">{{ subItem.operTypeName }}</view>

					<view class="main-item-center" :style="'color:' + (subItem.operPoint > 0 ? '#212121' : '#FF3333')">
						<text>{{ subItem.operPoint > 0 ? '+' : '' }}</text>
						{{ subItem.operPoint }}
					</view>

					<view class="main-item-below">{{ subItem.datetime }}</view>
				</view>
			</view>
		</view>
	</ls-page>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useRoute
	} from 'vue-router';
	import {
		HFiveMemberAppObjProcess
	} from '@/api/public.js'

	const pointsModal = ref({});
	const postForm = ref({
		memberCode: '',
		pageSize: 10,
		pageIndex: 1
	});
	const totalCount = ref(0);

	// 初始化数据
	const initData = async () => {
		// 假设app.global.userInfo已在uniapp中全局可访问
		postForm.value.memberCode = uni.getStorageSync('cardInfo').code

		const sendModal = {
			functionName: "MemberTransactionPointRecord_H5",
			contentData: postForm.value
		};

		try {
			const res = await HFiveMemberAppObjProcess(sendModal);

			if (postForm.value.pageIndex === 1) {
				pointsModal.value = res;
			} else {
				res.history = [...res.history, ...pointsModal.value.history];
				pointsModal.value = res;
			}

			totalCount.value = res.totalCount;
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};

	// 页面加载时初始化数据
	onMounted(() => {
		initData();
	});

	// 页面下拉刷新
	const onPullDownRefresh = () => {
		// 执行刷新逻辑
		initData();
		uni.stopPullDownRefresh();
	};

	// 页面上拉加载更多
	const onReachBottom = () => {
		if (postForm.value.pageSize * postForm.value.pageIndex >= totalCount.value) return;

		postForm.value.pageIndex++;
		initData();
	};
</script>

<style lang="scss" scoped>
	.centerCoin-container {
		width: 100%;
		overflow: scroll;
		box-sizing: border-box;
		padding: 40rpx 24rpx;

		.centerCoin-container-header {
			background: #212121;
			border-radius: 16rpx;
			text-align: center;
			padding: 60rpx 0 40rpx 0;
			margin-bottom: 30rpx;

			.container-header-value {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 48rpx;
				color: #fefefe;
				line-height: 48rpx;
				padding-bottom: 40rpx;
			}

			.container-header-title {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #ffffff;
				line-height: 24rpx;
			}
		}

		.centerCoin-container-main {
			padding: 30rpx 0;

			.container-main-h2 {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #212121;
				line-height: 32rpx;
				margin-bottom: 34rpx;
			}

			.container-main-item {
				background: #ffffff;
				border-radius: 16rpx;
				padding: 32rpx 24rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;

				.main-item-upper {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #212121;
					line-height: 32rpx;
				}

				.main-item-center {
					align-self: flex-end;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #ff3333;
					line-height: 32rpx;
				}

				.main-item-below {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
					line-height: 24rpx;
				}
			}
		}
	}
</style>